<template>
  <MainLayout title="钢筋接头安装质量检查记录">
    <view class="page">

      <view class="sec">基本信息</view>
      <view class="form">
        <view class="row"><text class="lbl">施工单位</text><input class="ipt" v-model="form.constructionUnit" /></view>
        <view class="row"><text class="lbl">编号</text><input class="ipt" v-model="form.serialNo" /></view>
        <view class="row"><text class="lbl">钢筋规格</text><input class="ipt" v-model="form.rebarSpec" placeholder="如 HRB400 20" /></view>
        <view class="row"><text class="lbl">接头数量</text><input class="ipt" type="number" v-model.number="form.jointCount" /></view>
        <view class="row"><text class="lbl">性能等级</text><input class="ipt" v-model="form.performanceLevel" placeholder="如 1级" /></view>
        <view class="row"><text class="lbl">操作工</text><input class="ipt" v-model="form.operatorName" /></view>
        <view class="row"><text class="lbl">切口试件</text><input class="ipt" v-model="form.cutSpecResult" placeholder="合格/不合格" /></view>
        <view class="row"><text class="lbl">力学试验</text><input class="ipt" v-model="form.mechSpecResult" placeholder="合格/不合格" /></view>

        <view class="row">
          <text class="lbl">安装开始</text>
          <view class="dt">
            <picker mode="date" :value="sDate" @change="e=>sDate=e.detail.value"><view class="picker">{{ sDate||'选择日期' }}</view></picker>
            <picker mode="time" :value="sTime" @change="e=>sTime=e.detail.value"><view class="picker">{{ sTime||'选择时间' }}</view></picker>
          </view>
        </view>
        <view class="row">
          <text class="lbl">安装结束</text>
          <view class="dt">
            <picker mode="date" :value="eDate" @change="e=>eDate=e.detail.value"><view class="picker">{{ eDate||'选择日期' }}</view></picker>
            <picker mode="time" :value="eTime" @change="e=>eTime=e.detail.value"><view class="picker">{{ eTime||'选择时间' }}</view></picker>
          </view>
        </view>

        <view class="row"><text class="lbl">检查部位</text><input class="ipt" v-model="form.position" /></view>
        <view class="row"><text class="lbl">执行标准</text><input class="ipt" v-model="form.standard" placeholder="如 JGJ107-2016" /></view>
        <view class="row"><text class="lbl">外观检查</text><textarea class="ta" v-model="form.appearanceCheck" /></view>
      </view>

      <view class="sec">抽检承压/强度值</view>
      <view class="list">
        <view class="list-row" v-for="(v,i) in form.pressValues" :key="'p'+i">
          <input class="ipt flex1" type="number" v-model.number="form.pressValues[i]" placeholder="数值" />
          <button size="mini" @click="form.pressValues.splice(i,1)">删</button>
        </view>
        <button class="btn-add" @click="form.pressValues.push(null)">+ 添加</button>
      </view>

      <view class="sec">施工过程检查</view>
      <view class="list">
        <view class="list-row" v-for="(it,i) in form.checklist" :key="'c'+i">
          <input class="ipt no" v-model="it.no" placeholder="序号" />
          <input class="ipt flex1" v-model="it.title" placeholder="检查内容与要求" />
          <input class="ipt" style="width:110rpx" v-model="it.result" placeholder="结论" />
          <button size="mini" @click="form.checklist.splice(i,1)">删</button>
        </view>
        <button class="btn-add" @click="addChecklist()">+ 添加检查项</button>
      </view>

      <view class="sec">评定与结论</view>
      <view class="form">
        <view class="row"><text class="lbl">施工评定</text><textarea class="ta" v-model="form.constructionEvaluation" /></view>
        <view class="row"><text class="lbl">监理结论</text><textarea class="ta" v-model="form.supervisorConclusion" /></view>
        <view class="row"><text class="lbl">备注</text><textarea class="ta" v-model="form.remark" /></view>
      </view>

      <view class="sec">签名</view>
      <view class="form">
        <view class="row"><text class="lbl">技术负责人</text><input class="ipt" v-model="form.techLeaderName" />
          <picker mode="date" :value="techDate" @change="e=>techDate=e.detail.value"><view class="picker">{{ techDate||'日期' }}</view></picker>
        </view>
        <view class="row"><text class="lbl">监理工程师</text><input class="ipt" v-model="form.supervisorEngineerName" />
          <picker mode="date" :value="supDate" @change="e=>supDate=e.detail.value"><view class="picker">{{ supDate||'日期' }}</view></picker>
        </view>
        <view class="row"><text class="lbl">记录人</text><input class="ipt" v-model="form.recorder" /></view>
        <view class="row"><text class="lbl">项目部(章)日期</text>
          <picker mode="date" :value="sealDate" @change="e=>sealDate=e.detail.value"><view class="picker">{{ sealDate||'日期' }}</view></picker>
        </view>
      </view>

      <view class="ops">
        <button type="primary" class="op" @click="onSave">保存</button>
        <button class="op" :disabled="!form.id" @click="onExport">导出 PDF</button>
      </view>

    </view>
  </MainLayout>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import MainLayout from '@/layouts/MainLayout.vue'
import { rebar } from '@/services/api'

// 表单
const form = reactive<any>({
  id: null,
  projectId: 0,
  constructionUnit: '',
  serialNo: '',
  rebarSpec: '',
  jointCount: 0,
  performanceLevel: '',
  operatorName: '',
  cutSpecResult: '',
  mechSpecResult: '',
  installDateS: '',
  installDateE: '',
  position: '',
  standard: '',
  appearanceCheck: '',
  pressValues: [] as number[],
  checklist: [] as Array<{ no: number|string; title: string; result: string }>,
  constructionEvaluation: '',
  supervisorConclusion: '',
  remark: '',
  techLeaderName: '',
  techLeaderDate: '',
  supervisorEngineerName: '',
  supervisorEngineerDate: '',
  recorder: '',
  projectDeptSealDate: '',
})

// 日期选择器值
const sDate = ref(''); const sTime = ref('');
const eDate = ref(''); const eTime = ref('');
const techDate = ref(''); const supDate = ref(''); const sealDate = ref('');

onLoad(async (q:any)=>{
  form.projectId = Number(q?.project_id || q?.projectId || 0)
  if(q?.id){
    const d = (await rebar.getById(Number(q.id)))?.data || {}
    Object.assign(form, d)
    if (form.installDateS) [sDate.value, sTime.value] = splitDT(form.installDateS)
    if (form.installDateE) [eDate.value, eTime.value] = splitDT(form.installDateE)
    techDate.value = form.techLeaderDate || ''
    supDate.value  = form.supervisorEngineerDate || ''
    sealDate.value = form.projectDeptSealDate || ''
    form.id = d.id
  }
})

function splitDT(dt:string){ const t = dt.replace('T',' '); const [d,tm] = t.split(' '); return [d, (tm||'').slice(0,5)] }
function toISO(d:string,t:string){ if(!d||!t) return ''; const s = `${d} ${t}:00`; const x = new Date(s.replace(/-/g,'/')); return isNaN(+x)? s: x.toISOString() }
function addChecklist(){ form.checklist.push({ no: (form.checklist.length+1), title:'', result:'' }) }

async function onSave(){
  form.installDateS = toISO(sDate.value, sTime.value)
  form.installDateE = toISO(eDate.value, eTime.value)
  form.techLeaderDate = techDate.value
  form.supervisorEngineerDate = supDate.value
  form.projectDeptSealDate = sealDate.value
  const ret = await rebar.save({ ...form })
  if (ret?.id) form.id = ret.id
  uni.showToast({ title:'已保存', icon:'success' })
}

async function onExport(){
  if(!form.id){ uni.showToast({ title:'请先保存', icon:'none' }); return }
  const bin = await rebar.exportPdf(form.id, form.projectName)
  // H5 触发下载
  // @ts-ignore
  if (typeof window !== 'undefined') {
    const blob = new Blob([bin as any], { type: 'application/pdf' })
    const url  = URL.createObjectURL(blob); const a = document.createElement('a')
    a.href = url; a.download = `钢筋接头安装质量检查_${form.id}.pdf`; a.click(); URL.revokeObjectURL(url)
  }
}
</script>

<style scoped>
.page{ padding:12px; }
.sec{ font-weight:600; margin:14px 0 8px; }
.form .row{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.lbl{ width:110px; color:#444; }
.ipt{ flex:1; min-height:36px; padding:6px 8px; border:1px solid #e6e6e6; border-radius:6px; background:#fff; }
.ta{ width:100%; min-height:90px; padding:6px 8px; border:1px solid #e6e6e6; border-radius:6px; background:#fff; }
.dt{ display:flex; gap:8px; flex:1; }
.picker{ min-width:120px; padding:6px 8px; border:1px solid #e6e6e6; border-radius:6px; background:#fff; color:#333; }
.list-row{ display:flex; align-items:center; gap:8px; margin:6px 0; }
.flex1{ flex:1; }
.no{ width:60px; text-align:center; }
.btn-add{ margin:6px 0 12px; padding:6px 10px; border:1px dashed #bdbdbd; background:#fff; border-radius:6px; color:#333; }
.ops{ display:flex; gap:12px; margin:18px 0 28px; }
.op{ padding:10px 14px; border-radius:6px; }
</style>
